<template>
	<view>
		<view class="content">
			<z-paging ref="paging" v-model="infoList" @query="queryList">

				<view slot="top">
					<view class="line"></view>
					<view style="display: flex;flex-direction: row;background-color: white;">
						<view class="timebg" @click="handleOpenPopup('top')">
							<text class="timetxt">{{chooseDate}}</text>
							<image src="../../../static/sanjiao.png" class="sanjiao"></image>
						</view>
						<select-lay class="select-lay" :value="quarterValue" slabel="type" svalue="typeid"
							placeholder="统计周期" :showplaceholder="false" :options="quarterArr"
							@selectitem="quarterselectitem">
						</select-lay>
					</view>

					<clh-popup :position="position" v-model="showPopup">

						<view style="display: flex;flex-direction: row;background-color: white;">
							<view class="timebg" @click="handleOpenPopup('top')">
								<text class="timetxt">{{chooseDate}}</text>
								<image src="../../../static/sanjiao.png" class="sanjiao"></image>
							</view>
							<select-lay class="select-lay" :value="quarterValue" slabel="type" svalue="typeid"
								placeholder="统计周期" :showplaceholder="false" :options="quarterArr"
								@selectitem="quarterselectitem">
							</select-lay>
						</view>

						<view class="line"></view>

						<picker-time :start="start" :end="end" :value="value" @change="bindChange" @cancel="bindCancel"
							:fields="fields"></picker-time>

					</clh-popup>
				</view>

				<view class="listbg">
					<view class="itemView" v-for="item in infoList">
						<view style="display: flex;flex-direction: row;">
							<image src="../../../static/water_img.png" class="itemImg"></image>
							<view style="margin-left: 17rpx;display: flex;flex-direction: column;">
								<text class="itemName">{{item.dwmc}}</text>
								<text class="itemTime" v-if="quarterValue == '1'">{{item.nd}}年{{item.months}}月</text>
								<text class="itemTime" v-else-if="quarterValue == '2'">{{item.nd}}年{{item.jd}}季度</text>
								<text class="itemTime"
									v-else-if="quarterValue == '3' && item.nd != null">{{item.nd}}年</text>
							</view>
						</view>
						<view class="itemLine"></view>
						<view class="view">
							<text>前三年水量(m³)：</text>
							<text style="flex: 1;font-weight: 600;text-align: right;">{{item.sjsl3}}</text>
							<text style="color: #1677FF;margin-left: 22rpx;">扣减量{{item.kjsl3}}</text>
						</view>
						<view class="view">
							<text>前两年水量(m³)：</text>
							<text style="flex: 1;font-weight: 600;text-align: right;">{{item.sjsl2}}</text>
							<text style="color: #1677FF;margin-left: 22rpx;">扣减量{{item.kjsl2}}</text>
						</view>
						<view class="view">
							<text>前一年水量(m³)：</text>
							<text style="flex: 1;font-weight: 600;text-align: right;">{{item.sjsl1}}</text>
							<text style="color: #1677FF;margin-left: 22rpx;">扣减量{{item.kjsl1}}</text>
						</view>

						<view
							style="height: 146rpx;background: #E0F7FF;border-radius: 16rpx;margin: 16rpx 24rpx 16rpx 24rpx;display: flex;justify-content: center;flex-direction: column;">
							<view class="view" style="margin-left: 24rpx;margin-right: 24rpx;">
								<text>加权系数计划：</text>
								<text style="flex: 1;font-weight: 600;text-align: right;">{{item.jhsl}}</text>
								<text style="color: #1677FF;margin-left: 22rpx;">调整量{{item.zjsl}}</text>
							</view>

							<view class="view" style="margin-left: 24rpx;margin-right: 24rpx;">
								<text>最终计划：</text>
								<text style="flex: 1;font-weight: 600;text-align: right;">{{item.zzjh}}</text>
							</view>
						</view>

						<view class="view" style="color: #999999;">
							<text>节水代码：</text>
							<text style="flex: 1;text-align: right;">{{item.jsdm}}</text>
						</view>

						<view class="view" style="color: #999999;">
							<text>用水性质：</text>
							<text style="flex: 1;text-align: right;">{{item.ysxzname}}</text>
						</view>

						<!-- <view class="view" style="color: #999999;margin-bottom: 28rpx;">
							<text>管理人员：</text>
							<text style="flex: 1;text-align: right;">曹金山</text>
						</view> -->
					</view>
				</view>
			</z-paging>
			<suspended @userData="childData"></suspended>
		</view>
	</view>
</template>

<script>
	import {
		GetList
	} from '@/common/api.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				position: 'top',
				showPopup: false,
				fields: 'month',
				nowDate: currentDate, //获取当前时间
				value: [currentDate],
				chooseDate: "选择时间段",
				start: "1900-01",
				end: "2200-12",

				infoList: [],

				quarterArr: [{
					type: '月',
					typeid: '1'
				}, {
					type: '季',
					typeid: '2'
				}, {
					type: '年',
					typeid: '3'
				}],
				quarterValue: '',
			}
		},

		onLoad() {
			//模拟修改start和end
			// setTimeout(() => {
			// 	this.start = "2000-01-01";
			// 	this.end = "2022-01-01"
			// }, 4000)
		},
		methods: {

			async queryList(pageNo, pageSize) {
				if (this.chooseDate == '选择时间段') {
					uni.showToast({
						title: '请选择查询时间',
						icon: 'none'
					})
					return
				}
				var data = {}
				switch (this.quarterValue) {
					case '1':
						data = {
							tjzq: this.quarterValue,
							startNd: this.chooseDate.split(' 至 ')[0].split('-')[0],
							endNd: this.chooseDate.split(' 至 ')[1].split('-')[0],
							startYf: this.chooseDate.split(' 至 ')[0].split('-')[1],
							endYf: this.chooseDate.split(' 至 ')[1].split('-')[1]
						}
						break;
					case '2':
						var startJd = ''
						switch (this.chooseDate.split(' 至 ')[0].split('-')[1]) {
							case '一季度':
								startJd = '1'
								break
							case '二季度':
								startJd = '2'
								break
							case '三季度':
								startJd = '3'
								break
							case '四季度':
								startJd = '4'
								break
						}
						var endJd = ''
						switch (this.chooseDate.split(' 至 ')[1].split('-')[1]) {
							case '一季度':
								endJd = '1'
								break
							case '二季度':
								endJd = '2'
								break
							case '三季度':
								endJd = '3'
								break
							case '四季度':
								endJd = '4'
								break
						}
						data = {
							tjzq: this.quarterValue,
							startNd: this.chooseDate.split(' 至 ')[0].split('-')[0],
							endNd: this.chooseDate.split(' 至 ')[1].split('-')[0],
							startJd: startJd,
							endJd: endJd
						}
						break;
					case '3':
						data = {
							tjzq: this.quarterValue,
							startNd: this.chooseDate.split(' 至 ')[0],
							endNd: this.chooseDate.split(' 至 ')[1]
						}
						break;
					default:
						break;
				}

				let res = await GetList(data);
				this.$refs.paging.complete(res.response.data);
			},

			handleOpenPopup(position) {
				if (this.quarterValue == '') {
					uni.showToast({
						title: '请选择统计周期！',
						icon: 'none'
					})
					return
				}
				this.position = position
				setTimeout(() => {
					this.showPopup = !this.showPopup
				}, 100)
			},

			bindChange(data) {

				if (this.quarterValue == '') {
					uni.showToast({
						title: '请选择统计周期！',
						icon: 'none'
					})
					return
				}
				console.log(data)
				if (data[0] != "") {
					this.chooseDate = data[0] + " 至 " + data[1]
				}
				this.showPopup = false
				this.$refs.paging.reload();
			},
			bindCancel() {
				this.showPopup = false
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return this.fields == 'year'? `${year}`:`${year}-${month}`; 
			},

			quarterselectitem(index, item) {
				this.quarterValue = item.typeid
				switch (item.typeid) {
					case '1':
						this.fields = 'month'
						this.start = "1900-01"
						this.end = "2200-12"
						break;
					case '2':
						this.fields = 'quarter'
						this.start = "1900-一季度"
						this.end = "2200-四季度"
						break;
					case '3':
						this.fields = 'year'
						this.start = "1900"
						this.end = "2200"
						break;
					default:
						break;
				}
				
				this.value = [this.getDate({
					format: true
				})]
			},
			
			childData(param) {
				console.log('切换节水代码',param)
				this.$refs.paging.reload();
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #f4f4f4;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.line {
		width: 100%;
		height: 1rpx;
		background-color: #f4f4f4;
	}

	.timebg {
		width: 100%;
		height: 90rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.timetxt {
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 42rpx;
	}

	.sanjiao {
		width: 20rpx;
		height: 14rpx;
		margin-left: 19rpx;
	}

	.listbg {
		height: 100%;
		padding: 0rpx 24rpx 24rpx 24rpx;
	}

	.itemView {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		border-radius: 17rpx;
		margin-top: 24rpx;
		padding-bottom: 28rpx;
	}

	.itemImg {
		width: 64rpx;
		height: 64rpx;
		margin-left: 24rpx;
		margin-top: 31rpx;
	}

	.itemName {
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 48rpx;
		margin-top: 25rpx;
	}

	.itemTime {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 33rpx;
		margin-top: 16rpx;
	}

	.itemLine {
		height: 1rpx;
		background-color: #ECECEC;
		margin-top: 24rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin: 24rpx 24rpx 16rpx 24rpx;
	}

	.view {
		height: 61rpx;
		margin-left: 48rpx;
		margin-right: 48rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 37rpx;
		color: #333333;
	}

	.select-lay {
		width: 50%;
		height: 100%;
		background: transparent;
	}
</style>
